<template>
  <div class="location">
    <van-nav-bar title="选择位置" fixed left-arrow @click-left="onClickLeft" />
    <div class="search">
      <van-search v-model="keyword" show-action placeholder="请输入城市名称">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="main">
      <div class="text_1">您所在的地区</div>
      <div class="location_address">
        <van-icon name="location-o" />
        <span>{{ locationInfo.distance }}</span>
      </div>
      <div class="text_1">热门地区</div>
      <div class="address">
        <van-tag v-for="(v, i) in addressList" :key="i" plain>{{ v }}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { isZxcxAPP, zxcxStartLocation } from "../utils/zxcxWebkits";

export default {
  components: {},
  props: {},
  data() {
    return {
      keyword: "",
      addressList: ["吴兴区", "南浔区", "长兴县", "德清县"],
      locationInfo: {
        distance: "",
        lat: "",
        lon: "",
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getLocation() {
      let res = await zxcxStartLocation();
      // Toast({
      //   message: JSON.stringify(res),
      //   duration: 0,
      // })
      (this.locationInfo.distance = res.district),
        (this.locationInfo.lat = res.latitude);
      this.locationInfo.lon = res.longitud;
    },
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {},
  },
  created() {},
  mounted() {
    if (isZxcxAPP()) {
      this.getLocation();
    }
  },
};
</script>
<style lang="less" scoped>
.location {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding: 150px 0 0 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .search {
    margin-top: 60px;
    margin: 60px 50px;
    background: #fff;
    /deep/ .van-search {
      padding: 10px;
    }
    /deep/ .van-search__content {
      background: #fff;
    }
  }

  .main {
    // height: calc(100vh - 350px);
    background: #fff;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding: 50px 45px;
    flex-grow: 1;
    .text_1 {
      font-size: 60px;
    }
    .location_address {
      margin: 40px 0;
      display: flex;
      align-items: center;
      color: #169dff;
      font-size: 50px;
      font-weight: bold;
    }
    .address {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px;
      /deep/ .van-tag {
        padding: 30px 40px;
        color: #333;
      }
    }
  }
}
</style>
